<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['安装管理[环卫]', '设备维修记录', '维修详情']"
      icon="fa fa-newspaper-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="s_page_wrap" style="position: relative">
    <div class="row" style="margin-top: 5px">
      <button class="btn btn-link" (click)="goBack()" style="position: absolute; right: 0; top: 10px; left: initial">
        >>返回维修记录
      </button>
      <div class="col-xs-12">
        <div class="tabbable">
          <ul class="nav nav-tabs" id="repairedTab">
            <li class="s-lis" [ngClass]="{ active: item.id == parentRowId }" *ngFor="let item of repairedList">
              <a data-toggle="tab" (click)="repairedDetail(item.id)">{{ item.title }}</a>
            </li>
          </ul>
          <div class="tab-content" style="padding: 10px; padding-top: 0; border: none">
            <div class="repairType" *ngIf="repairedDetailData && repairedDetailData.subFaultTypeList">
              <span class="title">故障类型:</span>
              <span>
                {{
                  repairedDetailData &&
                    repairedDetailData.subFaultTypeList &&
                    repairedDetailData.subFaultTypeList.join(',')
                }}
              </span>
            </div>
            <div class="tab-pane active" *ngIf="repairedDetailData">
              <div class="title">维修前</div>
              <div class="content">
                <div class="item" *ngFor="let item of repairedDetailData.repairedBefore; let i = index">
                  <span>故障照片{{ i + 1 }}</span>
                  <button (click)="imgViewer(item, i, 'before', ImgModal)">查看</button>
                </div>
              </div>
              <div class="title">故障描述</div>
              <div class="content">
                <textarea
                  name="deviceFaultDescription"
                  rows="4"
                  cols="80"
                  style="padding: 8px 12px"
                  [(ngModel)]="repairedDetailData.deviceFaultDescription"
                ></textarea>
              </div>
              <div class="title">维修后</div>
              <div class="content">
                <div *ngFor="let item of repairedDetailData.repairedAfter; let i = index">
                  <div class="title" *ngIf="item.isShow">{{ item.name }}</div>
                  <div *ngIf="item.name != '其他'">
                    <div class="item" *ngFor="let lis of item.repairedImage; let j = index">
                      <!-- <span>{{ lis.name }}</span> -->
                      <span>维修{{ j + 1 }}</span>
                      <span *ngIf="lis.prefix">[{{ lis.prefix }}]</span>
                      ：
                      <span *ngIf="lis.value">{{ lis.value }}</span>
                      <span *ngIf="item.name != '相关问题' && lis.value">mm</span>
                      <button *ngIf="lis.imageUrl" (click)="imgViewer(lis.imageUrl, lis.name, 'after', ImgModal)">
                        查看
                      </button>
                    </div>
                  </div>
                  <div *ngIf="item.name == '其他'">
                    <div class="item" *ngFor="let lis of item.repairedImage; let j = index">
                      <span>其他</span>
                      <span *ngIf="lis.prefix">[{{ lis.prefix }}]</span>
                      ：
                      <span *ngIf="lis.value">{{ lis.value }}</span>
                      <span *ngIf="item.name != '相关问题' && lis.value">mm</span>
                      <button *ngIf="lis.imageUrl" (click)="imgViewer(lis.imageUrl, lis.name, 'after', ImgModal)">
                        查看
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="title">维修总结</div>
              <div class="content">
                <textarea
                  name="repairedSummary"
                  rows="4"
                  cols="80"
                  style="padding: 8px 12px"
                  [(ngModel)]="repairedDetailData.repairedSummary"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="hr hr-dotted"></div>
      </div>
    </div>
  </div>
  <!-- 图片查看   弹窗-->
  <section
    bsModal
    #ImgModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="imgClose(ImgModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{{ activeImg.title }}图片</h4>
        </div>
        <div class="modal-body" style="min-height: 200px">
          <div class="row form-horizontal imagesInfo">
            <div *ngIf="activeImg.url" style="text-align: center; max-height: 480px">
              <img
                [src]="activeImg.url"
                [alt]="activeImg.title"
                style="max-height: 420px; width: auto; height: 100%"
                (click)="bigimg()"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 图片查看 弹窗end-->
</div>
